<template>
	<view class="mainbgc">
		<!-- 自定义头部 -->
		<view class="header-top-box">
			<view class="header-top fff flexbetween">
				<view class="top-image" @click="gotoBack()"></view>
				<view class="flexcenter">
					<view :class="current==1?'selecbottab tab1':'noselecbottab tab1'" @click="selectab(1)">未开始</view>
					<view :class="current==2?'selecbottab tab2':'noselecbottab tab2'" @click="selectab(2)">已结束</view>
				</view>
				<view class="wenhao"></view>
			</view>
		</view>
		<!-- 地图 -->
		<view class="mapbox">
			<map style="height:85vh;width: 100%;" :show-compass="true" scale="16" color="#ff0000" :latitude="latitude" :longitude="longitude" :markers='marker'>
				
			</map>
			<view class="setup"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				// 地图
				title: 'map', //地图标题
				latitude: 34.75343876, //纬度
				longitude: 113.63141920, //经度
				// scale:5,//最小数，缩放范围最大，可见程度最大
				scale: 18, //最大数，缩放范围最小，可见程度最小
				marker: [{
					id: 0,
					latitude: 34.75343885, //纬度
					longitude: 113.63141921, //经度
					iconPath: '../../../static/image/news/boy.png', //显示的图标        
					rotate: 0, // 旋转度数
					width:1, //宽
					height: 1, //高
					title: '你在哪了', //标注点名
					alpha: 0.5, //透明度
					polyline:'dottedLine',
					label: { //为标记点旁边增加标签   //因背景颜色H5不支持
						content: '锦和商务中心b座', //文本
						color: 'blue', //文本颜色
						fontSize: 60, //文字大小
						x: 5, //label的坐标，原点是 marker 对应的经纬度
						y: 1, //label的坐标，原点是 marker 对应的经纬度 
						borderWidth: 12, //边框宽度
						borderColor: 'pink', //边框颜色    
						borderRadius: 20, //边框圆角                        
						bgColor: 'black', //背景色
						padding: 5, //文本边缘留白
						textAlign: 'center' //文本对齐方式。
					},
					// anchor:{//经纬度在标注图标的锚点，默认底边中点
					//     x:0,    原点为给出的经纬度
					//     y:0,
					// }

				},{
					id: 1,
					latitude: 34.75543076, //纬度
					longitude: 113.63141910, //经度
					iconPath: '../../../static/image/news/girl.png', //显示的图标        
					rotate: 45, // 旋转度数
					width:1, //宽
					height: 10, //高
					title: '你在哪了', //标注点名
					alpha: 0.5, //透明度
					polyline:'dottedLine',
					label: { //为标记点旁边增加标签   //因背景颜色H5不支持
						content: '女孩', //文本
						color: 'blue', //文本颜色
						fontSize: 60, //文字大小
						x: 5, //label的坐标，原点是 marker 对应的经纬度
						y: 1, //label的坐标，原点是 marker 对应的经纬度 
						borderWidth: 12, //边框宽度
						borderColor: 'pink', //边框颜色    
						borderRadius: 20, //边框圆角                        
						bgColor: 'black', //背景色
						padding: 5, //文本边缘留白
						textAlign: 'right' //文本对齐方式。
					},
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '幸福花园店A组', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: '#00c16f', //背景颜色
						display: 'ALWAYS', //常显
					},
				}],
				controlskj:[{//在地图上显示控件，控件不随着地图移动
				   　　id:1,//控件id
				   　　iconPath:'@/static/image/system/setupicon.png',//显示的图标    
				   　　position:{//控件在地图的位置
				      　　left:15,
				      　　top:15,
				      　　width:50,
				      　　height:50
				  　　  },    
				　　}],
				// controlskj:{
				// 		id:1,
				// 		position:{
				// 			top:0,
				// 			left:0
				// 		},
				// 		iconPath:"@/static/image/system/setupicon.png",
				// 		// clickable:true
				// 	}
			}
		},
		methods: {
			gotoBack(){
				uni.navigateBack(1)
			},
			selectab(i) {
				this.current = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 顶部自定义
	.header-top-box {
		height: 170rpx;
		width: 100%;
	}

	.header-top {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		padding: 96rpx 40rpx 10rpx;
	}

	.top-image {
		margin-top: 20rpx;
		width: 20rpx;
		height: 38rpx;
		background: url('@/static/image/system/return.png') no-repeat;
		background-size: 20rpx 38rpx;
	}

	// 顶部tab
	.tab1 {
		border: 2rpx solid #0BBDCB;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		padding: 6rpx 30rpx;
	}

	.tab2 {
		border: 2rpx solid #0BBDCB;
		border-left: none;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		padding: 6rpx 30rpx;
	}

	// 选中的顶部
	.selecbottab {
		background-color: #0BBDCB;
		color: #FFFFFF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	// 未选中的顶部
	.noselecbottab {
		background-color: #fff;
		color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	
	// 地图内容
	.mapbox{
		position: relative;
	}
	// 设置
	.setup{
		position: absolute;
		bottom: 40rpx;
		left: 40rpx;
		width: 82rpx;
		height: 82rpx;
		background-image: url("@/static/image/system/setupicon.png");
		background-size: 100% 100%;
	}
</style>
